<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<html>
    <head>
        <title>订单详情</title>
        <div data-th-replace="layout/head"></div>
    </head>
<body>
    <!-- top bar -->
    <header class="bar bar-nav">
        <a  class="button button-link button-nav pull-left goBack" th:href="@{/mobile/uc/order/orderList}">
            <span class="iconfont icon-fanhui"></span>
        </a>
        <h1 class='title title-white'>订单详情</h1>
    </header>
    <!-- top bar end-->
    <div class="content wm-content order-content">
        <div class="page-group">
            <div id="page-infinite-scroll-bottom" class="page page-current">
                <div class="content infinite-scroll native-scroll" data-type='native' data-distance="100">
                    <section class="order-detail-head-bx">
                        <div class="ml10 mr10">
                            <span class="fs7">支付状态：</span>
                            <strong style="font-size: 1.0rem" th:if="${order['orderStatus']}=='SUCCESS'">已完成支付</strong>
                            <strong style="font-size: 1.0rem" th:if="${order['orderStatus']}=='REFUND'">已退费</strong>
                            <strong style="font-size: 1.0rem" th:if="${order['orderStatus']}=='CANCEL'">已取消</strong>
                            <strong style="font-size: 1.0rem" th:if="${order['orderStatus']}=='INIT'">未支付</strong>
                        </div>
                    </section>
                    <section>
                        <section class="wm-line"></section>
                        <ul class="my-order-list">
                            <li>
                                <div class="card">
                                    <div class="card-content">
                                        <div class="list-block media-list">
                                            <ul class="order-course-list">
                                                <th:block th:each="details,index : ${order['orderDetailsList']}">
                                                    <li class="item-content" th:if="${details['shopType']} !='QA' and ${details['shopType']} !='ATTEND' and ${details['shopType']} !='ACCOUNT' and ${details['shopType']} !='MEMBER' and ${details['shopType']} !='EXAM'">
                                                        <div class="item-media" th:if="${details['shopType']}=='COURSE' or ${details['shopType']}=='BOOK'">
                                                            <div class="wm-item-picture__wrap pr">
                                                                <th:block th:if="${details['shopType']}=='COURSE'">
                                                                    <img class="wm-img" th:attrappend="data-src=${details['shop']['course']['imageMap'] == null ? null : details['shop']['course']['imageMap']['mobileUrlMap']['small']}"  th:src="@{{path}/front/mobile/v3/img/default/error-pic.jpg?v={v}(path=${staticPath},v=${v})}" alt=""/>
                                                                </th:block>
                                                                <th:block th:if="${details['shopType']}=='BOOK'">
                                                                    <img class="wm-img" th:attrappend="data-src=${details['shop']['book']['imageMap'] == null ? null : details['shop']['book']['imageMap']['mobileUrlMap']['large']}"  th:src="@{{path}/front/mobile/v3/img/default/error-pic.jpg?v={v}(path=${staticPath},v=${v})}" alt=""/>
                                                                </th:block>
                                                            </div>
                                                        </div>
                                                        <div class="item-inner">
                                                            <div style="width: 100%">
                                                                <span class="fs7 c-333">
                                                                    <samp th:if="${details['courseTyple']}=='VIDEO'">【录播】</samp>
                                                                    <samp th:if="${details['courseTyple']}=='LIVE'">【直播】</samp>
                                                                    <samp th:if="${details['courseTyple']}=='COLUMNS'">【专栏】</samp>
                                                                    <samp th:if="${details['courseTyple']}=='PACKAGE'">【套餐】</samp>
                                                                    <samp th:text="${details['shopName']}"></samp>
                                                                </span>
                                                                <div class="row no-gutter">
                                                                    <section class="col-50">
                                                                        <span th:if="${details['shopType']}=='COURSE'">
                                                                            <span class="fs4 c-888"
                                                                                  th:if="${details['shop']['course']['validType']}==1"
                                                                                  th:text="'有效天数：'+${details['shop']['course']['validDay']}">
                                                                            </span>
                                                                            <span class="fs4 c-888"
                                                                                  th:if="${details['shop']['course']['validType']}==2"
                                                                                  th:text="'有效期：'+${#strings.substring(details['shop']['course']['validTime'],0,10)}+'前'">
                                                                            </span>
                                                                        </span>
                                                                        <br>
                                                                        <span class="fs4 c-888" th:if="${details['shopType']}=='BOOK'" th:text="'购买量：'+${details['buyNum']}"></span>
                                                                    </section>
                                                                    <section class="col-50 text-right">
                                                                        <span class="fs4 c-333" th:text="'￥'+${details['realPrice']}"></span>
                                                                    </section>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="item-content" th:if="${details['shopType']} =='QA' or ${details['shopType']} =='ATTEND' or ${details['shopType']} =='ACCOUNT' or ${details['shopType']} =='EXAM' or ${details['shopType']} =='MEMBER'">
                                                        <div class="item-inner">
                                                            <div class="item-title">
                                                                <span>
                                                                    <em class="icon iconfont icon-wenda fs7 vam c-red"></em>
                                                                    <span class="fs7 c-333" th:if="${details['shopType']}=='QA'" th:text="'【问答】'+${details['shop']['qa']['context']}"></span>
                                                                    <span class="fs7 c-333" th:if="${details['shopType']}=='ATTEND'" th:text="'【旁听】'+${details['shop']['qa']['context']}"></span>
                                                                    <span class="fs7 c-333" th:if="${details['shopType']}=='ACCOUNT'" th:text="'【充值】'+${details['shopName']}"></span>
                                                                    <span class="fs7 c-333" th:if="${details['shopType']}=='EXAM'" th:text="'【试卷】'+${details['shopName']}"></span>
                                                                    <span class="fs7 c-333" th:if="${details['shopType']}=='MEMBER'" th:text="'【会员】'+${details['shopName']}"></span>
                                                                </span>
                                                                <div class="ml5 pl75 row no-gutter">
                                                                    <section class="col-50">
                                                                        <span class="fs4 c-888">&nbsp;</span>
                                                                    </section>
                                                                    <section class="col-50 text-right">
                                                                        <span class="fs4 c-333" th:text="'￥'+${details['realPrice']}"></span>
                                                                    </section>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </th:block>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <section class="wm-line"></section>
                        <section>
                            <section class="content-block" style="margin: .5rem 0 1rem">
                                <div class="row pt5">
                                    <div class="col-25 text-right">
                                        <span class="fs6 c-888">订单编号：</span>
                                    </div>
                                    <div class="col-75">
                                        <span class="fs8 c-333" th:text="${order['orderNo']}"></span>
                                    </div>
                                </div>
                                <div class="row pt5">
                                    <div class="col-25 text-right">
                                        <span class="fs6 c-888">下单时间：</span>
                                    </div>
                                    <div class="col-75">
                                        <span class="fs8 c-333" th:text="${order['createTime']}"></span>
                                    </div>
                                </div>
                                <div th:if="!${#maps.isEmpty(order['activity'])} and ${#strings.contains(order['activity']['activityType'],'2')}" class="row pt5">
                                    <div class="col-25 text-right">
                                        <span class="fs6 c-888">活动赠送：</span>
                                    </div>
                                    <div class="col-75">
                                        <th:block th:if="!${#lists.isEmpty(order['activity']['course'])}">
                                            <section th:each="cou : ${order['activity']['course']}"  class="row no-gutter pb5">
                                                <aside class="col-auto">
                                                    <em class="icon iconfont icon-datiqia_icon fs18 c-blue"></em>
                                                </aside>
                                                <aside class="col-66">
                                                    <span class="fs7" th:text="${cou['courseName']}"></span>
                                                </aside>
                                                <aside class="col-20">
                                                    <a  th:href="@{/mobile/uc/course/myCourse}" class="button button-small button-danger button-round" style="opacity: .6">查看</a>
                                                </aside>
                                            </section>
                                        </th:block>
                                        <th:block th:if="!${#lists.isEmpty(order['activity']['coupons'])}">
                                            <section th:each="coupon : ${order['activity']['coupons']}" class="row no-gutter pb5">
                                                <aside class="col-auto">
                                                    <em class="icon iconfont icon-youhuiquan fs18 c-orange"></em>
                                                </aside>
                                                <aside class="col-66">
                                                    <span class="fs7" th:text="${coupon['title']}"></span>
                                                </aside>
                                                <aside class="col-20">
                                                    <a  th:href="@{/mobile/uc/op/coupon/myCoupons}" class="button button-small button-danger button-round" style="opacity: .6">查看</a>
                                                </aside>
                                            </section>
                                        </th:block>
                                       <!-- <th:block th:if="${order['activity']['integral']} !=null and ${order['activity']['integral']} > 0">
                                            <section th:each="coupon : ${order['activity']['coupons']}" class="row no-gutter pb5">
                                                <aside class="col-75">
                                                    <span class="fs7" th:text="'赠送积分：'+${order['activity']['integral']}"></span>
                                                </aside>
                                            </section>
                                        </th:block>-->
                                    </div>
                                </div>
                            </section>
                            <hr>
                            <section class="text-right pb5 mb5 pr75">
                                <section class="pb5">
                                    <span class="fs7">总金额：</span>
                                    <span class="fs8" th:text="'￥'+${order['sumPrice']}"></span>
                                </section>
                                <section class="pb5">
                                    <span class="fs7">总优惠：</span>
                                    <span class="fs8" th:text="'￥'+(${order['activityPrice']}+${order['yhPrice']} +${order['memberSubPrice']})"></span>
                                </section>
                                <section class="pb5">
                                    <span class="fs7">总计：</span>
                                    <span class="fs8 c-red" th:text="'￥'+${order['realPrice']}"></span>
                                </section>
                            </section>
                        </section>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <div data-th-replace="layout/footer"></div>
</body>
</html>